<template>
	<view>
			<!--标题栏目-->
			<view class="tada u-f-ac">
				<view style="width: 680upx;">
					<swiper-tab-head
						:tabBars="tabBars" 
						:tabIndex="tabIndex"
						@tabtap="tabtap"
						scrollItemStyle="width:25%"
						scrollStyle="border-bottom:0;">
					</swiper-tab-head>			
				</view>
				<view style="font-size:32upx;text-align:center; width: 70upx;" 
				class="icon iconfont icon-sousuo" @tap="toSearch"></view>
			</view>
		
			<!--内容-->
			<view class="uni-tab-bar">
				<swiper class="swiper-box" 
				:style="{height:swiperheight+'px'}" 
				:current="tabIndex"
				@change="tabChange">
					<!--个性推荐-->
					<swiper-item>
						<scroll-view scroll-y class="list" >
							<index-title @paihang="handletoPaihang"></index-title>
							<jiazai v-if="isshow">
							</jiazai>
							<block v-if="!isshow">
								<index-tuijian @togedan="handletogedan"
									:personalizedlist='personalizedlist'
									:newsongs='newsongs'
									:djprogram='djprogram'
									:mv='mv'>
								</index-tuijian>
							</block>
						</scroll-view>
					</swiper-item>
					<!--歌单-->
					<swiper-item >
						<scroll-view scroll-y class="list" @scrolltolower="scrolltolower" >
							<gedan v-if="tabIndex==1||gedan"  ref="Platlist" ></gedan>
						</scroll-view>
					</swiper-item>
					<!--主播电台-->
					<swiper-item >
						<scroll-view  class="list" >
							<image src="../../static/kaifa.png"  mode="scaleToFill"  
							style="width: 100%;" :style="{height:swiperheight+'px'}"
							></image>
						</scroll-view>
					</swiper-item>
					<!--排行榜-->
					<swiper-item >
						<scroll-view scroll-y class="list" >
							<paihang v-if="tabIndex==3||paihang"></paihang>
						</scroll-view>
					</swiper-item>
				</swiper>   
			</view>
			<!--小播放器-->
			<view class="player">
				<index-player v-if="isplayer"></index-player>
			</view>
	</view>
</template>

<script>
	import swiperTabHead from '../../components/index/swiper-tab-head/swiper-tab-head.vue';
	import jiazai from '../../components/home/jiazai/jiazai.vue';
	import indexTitle from '../../components/index/index-title/index-title.vue';
	import indexTuijian from '../../components/index/index-tuijian/index-tuijian.vue';
	import gedan from '../../components/index/gedan-list/gedan-list.vue';
	import paihang from '../../components/index/paihang/paihang.vue';
	import indexPlayer from '../../components/index/index-player/index-player.vue';
	export default {
		components:{
			swiperTabHead,
			jiazai,
			indexTitle,
			indexTuijian,
			gedan,
			paihang,
			indexPlayer
		},
		data() {
			return {
				swiperheight:500,
				tabIndex:0,
				tabBars:[
					{ name:"个性推荐",id:"tuijian" },
					{ name:"歌单",id:"gedan" },
					{ name:"主播电台",id:"diantai" 	  },
					{ name:"排行榜",id:"paihang"  },
				],	
				gedan:false,
				paihang:false,
				isshow:true,
				personalizedlist:[],
				newsongs:[],
				djprogram:[],
				mv:[],
				isplayer:false,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res)=> {
					let height=res.windowHeight-uni.upx2px(100)
					this.swiperheight=height;
				}
			});
			this.getRecommend();
		},
		//是否显示小播放器
		onShow(){
			if(this.$store.state.Id!=0){
				this.isplayer=true
			}
		},
		methods: {
			// tabbar点击事件
			tabtap(index){
				this.tabIndex=index;
				this.isIndex(index);
			},
			// 滑动事件
			tabChange(e){
				this.tabIndex=e.detail.current;
				this.isIndex(e.detail.current);
			},
			//检查是否以及点击过
			isIndex(index){
				if(index==1){
					this.gedan=true;
				}
				if(index==3){
					this.paihang=true;
				}
			}, 
		    //获取个性推荐
			async getRecommend(){
			  const resultPersonalized=await this.request({url: this.bsurl+'personalized?limit=6'});
			  const personalizedlist=resultPersonalized.result.map(v=>{
				return {
				  id:v.id,
				  name:v.name,
				  picUrl:v.picUrl+'?param=150y150',
				  playCount:v.playCount
				};
			  });
			  //新歌
			  const resultNewsongs=await this.request({url: this.bsurl+'personalized/newsong'});
			  const newsongs=resultNewsongs.result.splice(4).map(v=>{
				return {
				  id:v.id,
				  name:v.name,
				  picUrl:v.picUrl+'?param=150y150',
				};
			  });
			  //主播电台
			  const resultDjprogram=await this.request({url: this.bsurl+'personalized/djprogram'});
			  const djprogram=resultDjprogram.result.map(v=>{
				return {
				  id:v.id,
				  name:v.name,
				  picUrl:v.picUrl+'?param=150y150',
				};
			  });
			  //MV
			  const resultMv=await this.request({url:this.bsurl+'personalized/mv'});
			  const mv=resultMv.result.map(v=>{
				return {
				  id:v.id,
				  name:v.name,
				  picUrl:v.picUrl+'?param=195y110',
				};
			    });
				this.personalizedlist=personalizedlist;
				this.newsongs=newsongs;
				this.djprogram=djprogram;
				this.mv=mv;
				//判断是否有完成加载
				if(this.Finish()){
					setTimeout(()=>{
						this.isshow=false
					}, 1000);
				}	
			}, 
			scrolltolower(){
				this.$refs.Platlist.hanlegetplaylist()
			},
			toSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			//跳转到歌单
			handletogedan(){
				this.tabtap(1)
			},
			handletoPaihang(){
				this.tabtap(3)
			}
		}
	}
</script>

<style lang="less" scoped>
	.player{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
